<div class="p-2 break-inside-avoid">
  <div
    class="bg-card text-card-foreground border-border border w-full h-full rounded-lg p-3"
  >
    <div class="flex flex-row items-center mb-2">
      <div class="flex-grow self-center px-1">
        <h3 class="text-2xl font-bold">{Astro.props.name}</h3>
        {
          Astro.props.description ? (
            <p class="text-muted-foreground text-sm">
              {Astro.props.description}
            </p>
          ) : (
            ""
          )
        }
      </div>
      <a
        class="self-start items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground p-1"
        href={Astro.props.sourceLink}
      >
        {
          Astro.props.source == "x" ? (
            <>
              <span class="sr-only">X icon</span>
              <svg
                width="25"
                height="25"
                viewBox="0 0 25 25"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M19.0039 2.34375H22.4512L14.9219 10.9473L23.7793 22.6562H16.8457L11.4111 15.5566L5.2002 22.6562H1.74805L9.7998 13.4521L1.30859 2.34375H8.41797L13.3252 8.83301L19.0039 2.34375ZM17.793 20.5957H19.7021L7.37793 4.29688H5.32715L17.793 20.5957Z"
                  fill="currentColor"
                />
              </svg>
            </>
          ) : Astro.props.source == "hackernews" ? (
            <>
              <span class="sr-only">Hacker News icon</span>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="25"
                height="25"
                viewBox="0 0 448 512"
                fill="none"
              >
                <path
                  d="M0 32v448h448V32H0zm21.2 197.2H21c.1-.1 .2-.3 .3-.4 0 .1 0 .3-.1 .4zm218 53.9V384h-31.4V281.3L128 128h37.3c52.5 98.3 49.2 101.2 59.3 125.6 12.3-27 5.8-24.4 60.6-125.6H320l-80.8 155.1z"
                  fill="currentColor"
                />
              </svg>
            </>
          ) : Astro.props.source == "threads" ? (
            <>
              <span class="sr-only">Threads icon</span>
              <svg
                width="25"
                height="25"
                viewBox="0 0 878 1000"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M446.7 1000h-.3c-149.2-1-263.9-50.2-341-146.2C36.9 768.3 1.5 649.4.3 500.4v-.7c1.2-149.1 36.6-267.9 105.2-353.4C182.5 50.2 297.3 1 446.4 0h.6c114.4.8 210.1 30.2 284.4 87.4 69.9 53.8 119.1 130.4 146.2 227.8l-85 23.7c-46-165-162.4-249.3-346-250.6-121.2.9-212.9 39-272.5 113.2C118.4 271 89.6 371.4 88.5 500c1.1 128.6 29.9 229 85.7 298.5 59.6 74.3 151.3 112.4 272.5 113.2 109.3-.8 181.6-26.3 241.7-85.2 68.6-67.2 67.4-149.7 45.4-199.9-12.9-29.6-36.4-54.2-68.1-72.9-8 56.3-25.9 101.9-53.5 136.3-36.9 45.9-89.2 71-155.4 74.6-50.1 2.7-98.4-9.1-135.8-33.4-44.3-28.7-70.2-72.5-73-123.5-2.7-49.6 17-95.2 55.4-128.4 36.7-31.7 88.3-50.3 149.3-53.8 44.9-2.5 87-.5 125.8 5.9-5.2-30.9-15.6-55.5-31.2-73.2-21.4-24.4-54.5-36.8-98.3-37.1h-1.2c-35.2 0-83 9.7-113.4 55L261.2 327c40.8-60.6 107-94 186.6-94h1.8c133.1.8 212.4 82.3 220.3 224.5 4.5 1.9 9 3.9 13.4 5.9 62.1 29.2 107.5 73.4 131.4 127.9 33.2 75.9 36.3 199.6-64.5 298.3C673.1 965 579.6 999.1 447 1000h-.3zm41.8-487.1c-10.1 0-20.3.3-30.8.9-76.5 4.3-124.2 39.4-121.5 89.3 2.8 52.3 60.5 76.6 116 73.6 51-2.7 117.4-22.6 128.6-154.6-28.2-6.1-59.1-9.2-92.3-9.2z"
                  fill="currentColor"
                />
              </svg>
            </>
          ) : (
            ""
          )
        }
      </a>
    </div>
    <p class="text-muted-foreground">{Astro.props.testimonial}</p>
  </div>
</div>
